<template>
  <div class="news-list">
    <div class="news-list">
      <div class="news-list-start">
        <el-form label-position="top" label-width="100%" :model="search">
          <el-form-item label="输入标题搜索">
            <div class="start-text"></div>
            <el-input style="width: 25%" v-model="search.title"></el-input>
            <el-button class="btn" type="primary" @click="inSearch()"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- <div class="start-text">输入标题搜索</div>
        <el-input style="width: 25%" v-model="search.title"></el-input>
        <el-button class="btn" type="primary" @click="search()">搜索</el-button> -->
      </div>
    </div>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
      :btn1="btn1"
      :btn2="btn2"
      @btn1="EditDelete"
      @btn2="handleEdit"
    ></table-list>
    <!-- 弹出框表单 -->
    <!--
    <div class="list-from">
      <el-dialog
        title="上报水电费用"
        :visible.sync="dialogFormVisible"
        width="30%"
      >
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="水费"
            prop="water"
            :rules="[
              { required: true, message: '水费不能为空' },
              { type: 'number', message: '必须为数字值' },
            ]"
          >
            <el-input
              type="water"
              v-model.number="numberValidateForm.water"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="电费"
            prop="electric"
            :rules="[
              { required: true, message: '电费不能为空' },
              { type: 'number', message: '必须为数字值' },
            ]"
          >
            <el-input
              type="electric"
              v-model.number="numberValidateForm.electric"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('numberValidateForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('numberValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    -->
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableList from "../../components/common/TableList.vue";
export default {
  data() {
    return {
      search: {
        title: "",
      },
      tableHeader: [
        { prop: "title", label: "标题" },
        { prop: "date", label: "发布时间" },
        { prop: "text", label: "发布内容" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 1,
        delete: 1,
        edit: 0,
      },
      btn1: "删除",
      btn2: "编辑",
      editRow: {},
      dialogFormVisible: false,
      formLabelWidth: "100px",
      numberValidateForm: {
        water: "",
        electric: "",
      },
    };
  },
  components: {
    TableList,
  },
  created() {
    this.requestData();
  },
  methods: {
    requestData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/b-notice-list",
        })
          .then((res) => {
            // console.log(res); //res中含有请求的data等数据
            // console.log("res");

            this.tableData = res.data.data.sort((a, b) => {
              return a.id < b.id ? 1 : -1;
            });
            //    this.ruleForm.text = this.ruleForm.text.replace(
            //   /<p>/gi,
            //   '<p style="line-height: 1.67; margin-bottom: 0.5rem !important;">'
            // );
            this.tableData = this.tableData.map((s) => {
              s.text = s.text.replace(/<.*?>/g, "");
              if (s.text.length >= 50) {
                s.text = s.text.slice(0, 50);
                s.text = s.text + "...";
              }
              return s;
            });
            // console.log(this.tableData);
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    //接收子组件编辑操作,没用到
    handleEdit(row) {
      this.editRow = row;
      this.dialogFormVisible = true;

      console.log(111);
      console.log(row);
    },
    //接收子组件删除操作
    EditDelete(row) {
      // console.log(22);
      // console.log(row);
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            method: "post",
            url: "/delete_notice", //传入confing,在baseURL后面的值
            data: {
              id: row.id,
            },
          })
            .then((res) => {
              // console.log(res); //res.mesg=="0k"
              this.requestData().then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    inSearch() {
      console.log(this.search.title);
      this.requestData().then(() => {
        if (this.search.title.length >= 1) {
          let newShowData = this.tableData.filter((s) => {
            return s.title.includes(this.search.title);
          });
          this.tableData = newShowData;
          console.log(newShowData);
        }
      });
    },
    // 提交 弹出框
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log(this.numberValidateForm.water);
          console.log(this.numberValidateForm.electric);
          this.dialogFormVisible = false;
          setTimeout(() => {
            this.resetForm(formName);
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log(this.editRow);
    },
    // 弹出框
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.news-list {
  .news-list {
    box-sizing: border-box;
    // margin: 20px;
    width: 100%;
    // height: 100%;
    padding: 20px;
    .news-list-start {
      width: 100%;
      // height: 120px;
      background-color: #ffffff;
      color: #000;
      margin-bottom: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      .btn {
        margin-left: 10px;
      }
      // @include center;
    }
    // .news-list-header {
    //   // height: 50px;
    //   // border: 1px solid #ccc;
    //   // background-color: #161212;
    //   // padding: 0 20px;
    //   // box-sizing: border-box;
    // }
    .news-list-table {
      // height: 100%;
      background-color: #ffffff;
      padding: 0 10px;
      box-sizing: border-box;
      // overflow: scroll;
      // overflow-y: scroll;
      .pagination {
        padding-top: 10px;
        padding-bottom: 100px;
        display: flex;
        @include right;
        background-color: #ffffff;
      }
    }
  }
}
</style>
